/**
 * Created by shaotingzhou on 2017/5/10.
 */
//下载情况
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    ActivityIndicator,
    Platform,
    ScrollView
} from 'react-native';
import { Bar } from 'react-native-pathjs-charts'
import Navigator from '../../Main/navigator' //导航栏
import Item from './downloadInfoItem'  //中间部分
var {width,height} = Dimensions.get('window');

export default class DownloadInfo extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            barDataAry : [],
            typeDic: {}
        };
    }
    render() {
        const ary = this.state.barDataAry
        const dic = this.state.typeDic

        if(ary.length > 0) {
            let data = [
                [
                    {
                    "v": ary[0].count,
                    "name": "周一"
                    },
                    {
                    "v": ary[1].count,
                    "name": "周二"
                    },
                    {
                        "v": ary[2].count,
                        "name": "周三"
                    },
                    {
                        "v": ary[3].count,
                        "name": "周四"
                    },
                    {
                        "v": ary[4].count,
                        "name": "周五"
                    },
                    {
                        "v": ary[5].count,
                        "name": "周末"
                    }
                    ]
            ]

            let options = {
                width: 300,
                height: 200,
                margin: {
                    top: 20,
                    left: 25,
                    bottom: 50,
                    right: 20
                },
                color: '#EE1289',
                gutter: 40,
                animate: {
                    type: 'oneByOne',
                    duration: 200,
                    fillTransition: 3
                },
                axisX: {
                    showAxis: true,
                    showLines: true,
                    showLabels: true,
                    showTicks: true,
                    zeroAxis: false,
                    orient: 'bottom',
                    label: {
                        fontFamily: 'Arial',
                        fontSize: 8,
                        fontWeight: true,
                        fill: '#EE1289',
                        rotate: 22
                    }
                },
                axisY: {
                    showAxis: true,
                    showLines: true,
                    showLabels: true,
                    showTicks: true,
                    zeroAxis: false,
                    orient: 'left',
                    label: {
                        fontFamily: 'Arial',
                        fontSize: 8,
                        fontWeight: true,
                        fill: '#34495E'
                    }
                }
            }

            let description =  '下载了' + ary[0].count + '首歌曲'
            let description1 = '下载了' + ary[1].count + '首歌曲'
            let description2 = '下载了' + ary[2].count + '首歌曲'
            let description3 = '下载了' + ary[3].count + '首歌曲'
            let description4 = '下载了' + ary[4].count + '首歌曲'
            let description5 = '下载了' + ary[5].count + '首歌曲'

            let allCount = 0
            ary.forEach(function (val, index) {
                allCount += val.count
            })

            let tatalDescription = '上周一共下载了' + allCount + '首歌曲:' +
                '华语歌曲' + dic["华语"] + '首,' +
                '日语歌曲' + dic["日语"] + '首,' +
                '英语歌曲' + dic["英语"] + '首,' +
                '韩语歌曲' + dic["韩语"] + '首,' +
                '其他语种歌曲' + dic["其他"] + '首.' +
                dic["最多"] + '下载次数最多,' +
                dic["最少"] + '下载次数最少.'

            return (
                <View style={{backgroundColor:'#DEDEDE'}}>
                    {/*导航栏*/}
                    <Navigator
                        centerText = '下载情况'
                        leftSource  = {require('../../image/返回.png')}
                        leftAction = {()=>this.leftAction()}
                        rightAction = {() => this.rightAction()}
                    />
                    <ScrollView style={{height:height}}>
                        {/*柱状图*/}
                        <View style={{backgroundColor:'white',marginBottom:1}}>
                            <Bar data={data} options={options} accessorKey='v'/>
                        </View>
                        {/*中间部分*/}
                        <Item leftTxt = {ary[0].type} rightTxt = {description}  champion = {ary[0].champion}/>
                        <Item leftTxt = {ary[1].type} rightTxt = {description1} champion = {ary[1].champion}/>
                        <Item leftTxt = {ary[2].type} rightTxt = {description2} champion = {ary[2].champion}/>
                        <Item leftTxt = {ary[3].type} rightTxt = {description3} champion = {ary[3].champion}/>
                        <Item leftTxt = {ary[4].type} rightTxt = {description4} champion = {ary[4].champion}/>
                        <Item leftTxt = {ary[5].type} rightTxt = {description5} champion = {ary[5].champion}/>
                        {/*底部*/}
                        <View style={{backgroundColor:'white',marginBottom:1,height:150}} ref="bottom">
                            <Text style={{marginTop:10,marginLeft:5,fontWeight:'bold'}}>上周情况:</Text>
                            <Text style={{marginTop:5,marginLeft:5,}}>{tatalDescription}</Text>
                        </View>
                    </ScrollView>
                </View>
            )
        }else{
            return(
                <ActivityIndicator
                    animating={true}
                    style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}
                    size="large" />
            )
        }
    }

    componentDidMount() {
        console.disableYellowBox = true;  //关闭警告提示
        let url = 'http://rapapi.org/mockjsdata/18730/bar'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    barDataAry:json.bar,
                    typeDic:json.type
                })

            })
    }


    leftAction =()=>{
        this.props.navigator.pop({})
    }

    rightAction =()=>{

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});
